{% extends "common/layout.html" %}
{% block css %}
    <meta name="referrer" content="no-referrer">
    <style type="text/css">
        .mainxx {
            width: 65%;
            float: left;

        {% if xiang=='wula' or xiang=='suka' %}
            margin-left: 110px;
        {% endif %}
        }


        .aspect-ratio {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 75%;
        }


        .font-weight-light {
            float: left;
            width: 900px;
        }


        {% if xiang=='wula' or xiang=='suka' %}
            .title_zan {
                background-color: #f9f9f9;
                position: absolute;
                width: 100%;
                height: 15%;
            {% if xiang!='wula' or xiang=='suka' %}
                {#left: 110px;#}
            {% endif %}


            {#top: 716px;#} top: 75%;
            }
        {% else %}
            .title_zan {
                background-color: #f9f9f9;
                position: absolute;
                width: 100%;
                height: 15%;

            {#top: 676px;#} left: 6%;
                top: 74%;
            }
            .aspect-ratio iframe {
                position: absolute;
                width: 100%;
                height: 83%;
                left: 60px;
                top: -30px;
            }
        {% endif %}

        .zan_cai {
            float: right;
            margin-right: 50px;
        }

        .title_zan h5 {
            margin-top: 1px;
        }

        .right-tui {
            float: right;
            width: 250px;
            margin-right: 120px;
        }

        .tuiaa {
            width: 200px;
            height: 100px;
        }

        .card {
            margin-top: 20px;
        }

        .card-header {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        @media (min-width: 0px) and (max-width: 1252px) {
            .mainxx {
                width: 100%;
                float: left;
                margin-left: 1px;
            }

            .aspect-ratio iframe {
                position: absolute;
                width: 100%;
                height: 83%;
                top: -30px;
                left: 1px;
            }

            .title_zan {
                background-color: #f9f9f9;
                position: absolute;
                width: 100%;
                height: 15%;
            {#top: 676px;#} left: 1px;
                top: 75%;
            }

            .right-tui {
                float: right;
                width: 250px;
                margin-right: 1px;
            }
        }
    </style>
{% endblock %}
{% block content %}
    <div class="mainxx">
        <div class="aspect-ratio" style="margin: 0 auto;">
            {% if xiang=='wula' %}
                {{ info.BV | safe }}
            {% elif xiang=='suka' %}
                {{ info.video | safe }}
            {% else %}
                <iframe src="//player.bilibili.com/player.html?bvid={{ info.BV | safe }}&page=1&high_quality=1&danmaku=0"
                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
                        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
            {% endif %}

            <div class="title_zan">
                <h5>{{ info.title | safe }}</h5>
                <span>
                <p class="font-weight-light">{{ info.bofang_num | safe }}次观看 · {{ info.create_time | safe }}</p>
                <span class="zan_cai">
                    <i class="bi bi-balloon-heart">{{ info.love_num | safe }}</i>&nbsp;&nbsp;
                    <i class="bi bi-star">{{ info.love_num | safe }}</i>
                </span>
            </span>
                <hr style="margin-top: 50px"/>
                <p class="font-weight-light">{{ info.jianjie }}</p>
            </div>


        </div>
    </div>
    <span class="right-tui">
        视频推荐：
        {% for i in tui %}
            <div class="card border-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">{{ i.title }}</div>
                <div class="card-body text-primary">
                    <a href="{{ buildUrl('info?id='~i.id+'&xiang='+xiang) }}">
                        <img class="tuiaa card-img-top" src="{{ i.img_url }}">
                    </a>
                </div>
            </div>
        {% endfor %}
    </span>
{% endblock %}